<template>
	<app-layout>
		<view class="template-order">
			<tn-nav-bar :bottomShadow="!!0">人员明细</tn-nav-bar>
			<!-- 顶部标签 -->
			<!-- 顶部自定义导航 -->
			<view class="tabs-fixed tn-bg-white">
				<view class="tn-flex tn-flex-col-between tn-flex-col-center tn-padding-top-sm"
					:style="{marginTop: vuex_custom_bar_height + 'px'}">
					<view class="justify-content-item" style="width: 87vw;overflow: hidden;">
						<tn-tabs ref="tabs" class="tabs" :list="levelist" :countshow="!!1" :isScroll="false"
							:current="level" name="details" style="width: 87vw;" @change="tabsChange"></tn-tabs>
					</view>

					<view class="justify-content-item" style="width: 13vw;overflow: hidden;" @click="findshow">
						<view class="tn-color-black tn-round"
							style="font-size: 45rpx;margin-top: -5rpx;margin-left: 15rpx;">
							<text class="tn-icon-search tn-padding-xs"></text>
						</view>
					</view>
				</view>
			</view>
			<userlist @userclick="checkface" :list="userlist" :issearch="search"></userlist>
			<view class="">
				<userselect  ref="userselect" @select="findsome" @close="userclose"></userselect>
			</view>
		</view>
	
	</app-layout>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	import userselect from '@/components/user-select.vue';

	export default {
		name: 'muserlist',
		mixins: [templatePageMixin],
		components: {
			userselect
		},
		data() {
			return {
				levelist: [],
				levelist2: ["全部", "一级", "二级", "三级", "四级", "未分类"],
				level: '',
				userlist: [],
				param: {},
				page: 1,
				requseturl: this.$api.user.list,
				curr: 0,
				search:'',
			}
		},
		onLoad(options) {
			this.curr = options.level ? parseInt(options.level) : this.curr;
			uni.setNavigationBarTitle({
				title: `${this.levelist2[this.curr]}人员列表`
			})
			this.getList()
		},
		onReady() {

		},
		onReachBottom() {
			this.getList();
		},


		methods: {
			// 跳转
			checkface(user) {
				// 待分类人员，不能点进去查看人员详情
				if (this.level == 5) {
					return false;
				}
				let url = `/discoveryPages/userinfo?id=${user.mfid}&checkname=${user.username}`;

				uni.navigateTo({
					url: url
				});
			},

			// 标签栏值发生改变
			tabsChange(index) {
				this.level = index
				this.page = 1;            
				this.getList();
			},
			findsome(e) {
				this.page = 1;
				this.search = e;
				this.getList()
			},

			findshow() {
				//关闭搜索框
				this.$refs['userselect'].show = !!1;
			},

			userclose(e) {
			},


			getList() {
				let t = this;
				if(t.page==1){
					uni.pageScrollTo({
						scrollTop:0,
						duration:0
					})
				}
				this.$t.message.loading("加载中");
				this.$request({
					url: this.requseturl,
					method: "POST",
					data: {
						limit_page: t.page,limit_count:20,
						//分类 一级 二级 三级 四级 默认全部
						fcfl: t.levelist.length > 0 ? t.levelist[t.level].name : t.levelist2[t.curr],
						...t.search
					}
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						if (response.fcfl && response.fcfl.length > 0) {
							this.levelist = response.fcfl
							if (t.level==='') {
								t.level = t.curr;
							}
						}
						if (this.page !== 1) {
							this.userlist = this.userlist.concat(response.list);
						} else {
							this.userlist = response.list;
						}
						this.page = response.list.length ? this.page + 1 : this.page;

					} else {
						uni.showModal({
							title: '',
							content: msg,
							showCancel: false,
						});
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.nobody {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.face {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	.userlist {
		padding-top: 10rpx;
		position: relative;

		.user {
			position: relative;
			margin: 20rpx;
			padding: 36rpx 26rpx;
			border-radius: 15rpx;
			background-color: #fff;
			box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
		}

		.usertag {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			display: flex;
			width: 400rpx;
			flex-wrap: wrap;
			justify-content: flex-end;
		}
	}

	.search {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: inherit;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0vw;
		box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
		z-index: 99;
		background-color: #FFFFFF;
		height: 100rpx;

		.city {
			border-right: 2rpx solid #888888;
			margin: 0 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.box {
			margin-right: 50rpx;
		}
	}

	.tabs {}
</style>